<template>
  <div class="container">
    <div class="searchBox">
        <input type="text" placeholder="搜索" v-focus="focusStatus" >
    </div>
    <div class="noContent">Gooooo! 🔍 <br />您想查什么内容可在待办事项和备注内查找</div>
  </div>
</template>

<script>
export default {
  name: "search",
  data() {
    return {
      focusStatus: false
    };
  },
  created() {
    if (this.$route.path === "/search") {
      this.focusStatus = true;
    }
  }
};
</script>

<style scoped>
.container {
  width: 100%;
  height: 100%;
  position: relative;
}

.searchBox {
  box-sizing: border-box;
  width: 100%;
  height: 64px;
  padding: 0 20px;
  background-color: #58c890;
  overflow: hidden;
}
.searchBox > input {
  display: block;
  width: 100%;
  height: 36px;
  margin: 14px auto 0;
  outline: none;
  border: 0px;
  font-size: 16px;
  text-indent: 10px;
}

.noContent {
  text-align: center;
  position: absolute;
  top: 40%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>


